<template>
  <div>
    <div v-for="(i, index) in datalist" :key="index">      <br>
      <div v-for="(j, ind) in i" :key="ind">
        {{ j.name }}
        <el-input v-model="valueslist[j.key + index]" style="width: 200px" />
      </div>
    </div>
    <br><br>
    &emsp;
    &emsp;
    <el-button @click="add">+</el-button>

    <el-button @click="submit">提交</el-button>
    <div v-for="(m, index) in resultlist" :key="index">
      {{ m.name }}
      <p v-if="m.type == 'input'"><el-input v-model="namelist[m.name]" /></p>
      <p v-if="m.type == 'select'">
        <select v-model="namelist[m.name]">
          <option :value="v" v-for="(k, v) in m.value" :key="k">{{ k }}</option>
        </select>
      </p>
      <p>

      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      resultlist: [],
      valueslist: [],
      namelist: [],
      sum: 1,
      datalist: [
        [
          { name: "名称", key: "name" },
          { name: "类型", key: "type" },
          { name: "类值", key: "value" },
        ],
      ],
    };
  },
  methods: {
    add() {
      this.sum++;
      this.datalist.push([
        { name: "名称", key: "name" },
        { name: "类型", key: "type" },
        { name: "类值", key: "value" },
      ]);
    },
    submit() {
      for (var i = 0; i < this.sum; i++) {
        var name = "name" + i;
        var type = "type" + i;
        var value = "value" + i;
        var v = "";
        alert(this.valueslist[value]);
        if (this.valueslist[value]) {
          alert("333");
          v = JSON.parse(this.valueslist[value]);
        }

        this.resultlist.push({
          name: this.valueslist[name],
          type: this.valueslist[type],
          value: v,
        });
      }
      console.log(this.resultlist);
    },
  },
};
</script>

<style>
</style>